<template>
    <div id="tmpl">
        <div id="mui-content" class="mui-content" style="background-color:#fff">
            <ul class="mui-table-view mui-grid-view">
                
                <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
                    <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
                    <a href="#">
                        <img class="mui-media-object" :src="item.img_url">
                        <div class="mui-media-body">{{item.title}}</div>
                        <div id="desc">
                            <p class="jg">
                                <span>￥{{item.sell_price}}</span>
                                <s>￥{{item.market_price}}</s>
                            </p>
                            <p class="hot">
                                <span class="fl">热销中</span>
                                <span class="fr">剩余{{item.stock_quantity}}件</span>
                            </p>
                        </div>
                    </a>
                    </router-link>
                </li>
                
            </ul>
        </div>
        <mt-button type="danger" plain size="large" @click="getmore">加载更多</mt-button>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import common from '../../kits/common.js';
export default {
    data() {
        return {
            pageindex:1,
            list: [
                // {
                //     id: 87,
                //     title: "华为（HUAWEI）荣耀6Plus 16G双4G版",
                //     add_time: "2015-04-19T16:51:03.000Z",
                //     zhaiyao: "荣耀6 Plus，该机型分为两款型号，分别为PE-",
                //     click: 0,
                //     img_url: "http://182.254.146.100:8080/upload/201504/20/thumb_201504200046589514.jpg",
                //     sell_price: 2195,
                //     market_price: 2499,
                //     stock_quantity: 60
                // },
                // {
                //     id: 88,
                //     title: "苹果Apple iPhone 6 Plus 16G 4G手机（联通三网版）",
                //     add_time: "2015-04-19T17:00:58.000Z",
                //     zhaiyao: "iPhone 6 Plus设计上和iPhone 6",
                //     click: 0,
                //     img_url: "http://182.254.146.100:8080/upload/201504/20/thumb_201504200059017695.jpg",
                //     sell_price: 5780,
                //     market_price: 6388,
                //     stock_quantity: 200
                // }
               
            ]
        }
    },
    created() {
            this.getgoods();
    },
    methods: {
         getmore(){
            this.pageindex++;
            this.getgoods(this.pageindex);
        },
        getgoods() {
            var url=common.apidomain+'/api/getgoods?pageindex='+this.pageindex;
            this.$http.get(url).then(function(res){
                if(res.body.status !=0){
                    Toast(res.body.message);
                    return;
                }
                this.list=this.list.concat(res.body.message);
            })
        }
    }
}

</script>
<style scoped>
#mui-content {
    border: 0;
    padding:5px;
}

#mui-content ul {
    padding: 0;
    margin:0;
    border: 0;
}

#mui-content ul li {
    margin-top: 5px;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

#mui-content ul li a {
    border: 0;
    padding: 0px;
    margin: 0;
}

#mui-content .mui-media-body {
    font-size: 14px;
}

#desc {
    background-color: #eee;
    overflow: hidden;
    padding: 5px;
    margin-top: 5px;
}

#desc p {
    color: rgba(0, 0, 0, 0.5);
    text-align: left;
}

#desc .jg s {
    padding-left: 30px;
}

#desc .jg span {
    color: red;
}

#desc .hot {
    padding-top: 10px;
}

#desc .fl {
    float: left;
}

#desc .fr {
    float: right;
}

.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    font-weight: bolder;
    text-align: left;
    padding-left: 5px;
}
</style>

